React 回憶錄 - Day4

Route System

簡介

傳統的Route System 是在瀏覽器打開之後

向Server索取資訊

此時Client端會鎖死等待(Block)

Server 會在Database下相對的 Query 取得Data之後

透過(ejs, jade.....)將Data整理成一份HTML

將此HTML透過Response 發送給瀏覽器去顯示

Single Page Application

然而 SPA 的出現 迫使了前端也需要有一個Route System

來定義 Route 與頁面之間的關係

React因為也已經把ejs, jade 這類的Template的工作都完成了

後端只需要提供 API 讓前端可以有接口可以取得相對應的資訊

不但讓前後端的工作分離

僅僅藉由 API 這個溝通橋樑

使用通用的資料型態(XML, Json)做資訊交換

實際使用

src/reducers/index.js

export default {};

由於在Provider 中需要傳入一個store

所以先準備一個空的 reducers

src/App.js

import React, {Component} from 'react';
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import {Router, Route, browserHistory} from 'react-router';
import {syncHistoryWithStore, routerReducer} from 'react-router-redux';

import reducers from './reducers';
import LoginScene from './containers/LoginScene';
import HomeScene from './containers/HomeScene';

const store = createStore(combineReducers({
  ...reducers,
  routing: routerReducer
}))

// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      auth: false
    };
  }

  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <Route path="/" component={LoginScene}></Route>
          <Route path="/home" component={HomeScene}></Route>
        </Router>
      </Provider>
    );
  }
}

export default App;

Provider

因為在每個 container 中 需要利用 connect 來綁定 Store

所以需要 Provider 這個 wrapper

history

react-router 提供三個history lib使用

hashHistory

最簡單的history lib 若只是Example 可以安心的使用，但是若是真的要架設一個真實的web 產品

建議使用browserHistory

browserHistory

一般 Web APP 使用的history lib

createMemoryHistroy

有可能會使用在測試環境的 lib

routerReducer

在每一個container中

有時候我們需要知道目前的 Route 相關資訊

最方便的就是可以讓 route 直接在 store 中同步

這個Method協助我們完成這件事情

另外也有 提供 middleware 完成相同的事情

routerMiddleware

他也有提供 push, replace, go, goBack 四種Function

來讓你做Navigator的控制

但是前提是你需要先使用 routerMiddleware

我目前先選用routerReducer

有空再來測試這四種Method

Result

/

/home

Next

React 回憶錄 -Actions